<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="">
</body>
<script>
    // 1.数据：基础类型 ：数字，字符串，布尔，null，undefined
    // 变量名：英文，数字，下划线，美元符号组合，但是不能数字开头 aa a1 $a _this  8s(错误)
    let a1 = 6; //数字  number
    let aa = 'hello'; // 字符串，可以单引号可以双引号
    let $a = true; //布尔值 true false
    let _a ; //声明了未赋值  undefined
    // let 8s = 888; 错误的写法
    console.log(a1)
    console.log(typeof(a1))
    console.log(typeof(aa))
    console.log(typeof($a))
    console.log(typeof(_a))

    // 2.数据：复合类型 : 数组， 对象

    //数组
    let arr = [1, 'malin', 3, true]

    console.log(arr,111)
    console.log(arr[2]);//获取下标为2对应的数据
    arr[4] = 666; //新增一个数据
    console.log(arr, 222)
    arr[6] = 888;
    console.log(arr, 333)

    console.log(arr.length);//获取长度
    arr.length = 3; //删除数据
    arr.length = 0; //清空数组
    arr = [];//清空数组
    console.log(arr, 444)

    let arr2 = [1, 2, 3, 4]

    //把每个数打印出来
    for(let i = 0; i < arr2.length; i++) {
        console.log(arr2[i])
    }

    //对象:属性名(键名) ： 属性值(键值)  - 键值对
    let obj = {
        name : '三金哥',
        age : '22',
        id : '04557785'
    }

    console.log(obj['name'])
    console.log(obj.name)
    let aaa = 'name';
    console.log(obj[aaa])

    // 工作中遇到的后端接口数据会复杂很多

    //json数据：和后端交互的一种数据格式
    let data = [{
        gid : 01,
        name : '霸王洗发水',
        color : '黑色'
    },{
        gid : 02,
        name : '飘柔',
        color : '黑色'
    },{
        gid : 03,
        name : '海飞丝',
        color : '黑色'
    }]

    console.log(data[1].name)

    for(let i = 0; i < data.length; i++) {
        console.log(data[i].name)
    }

    //数据
    let datalist = [{
        id : 001,
        name : '连衣裙',
        color : ['红色', '黑色', '绿色'],
        inf : {
            adr : '广东广州市白云区',
            tel : '020-488554555',
            man : '李果'
        }
    },{
        id : 002,
        name : 'oppo',
        color : ['红色', '黑色', '绿色', '金色', '粉红色'],
        inf : {
            adr : '广东广州市白云区',
            tel : '020-488554555',
            man : '李果'
        }
    }]

    //打印：李果 666
    console.log(datalist[0].inf.man)

    //课堂作业：1.连衣裙的黑色
    console.log(datalist[0].color[1])

    //课堂作业：2.oppo所有的颜色 for
    for(let i = 0; i < datalist[1].color.length; i++) {
        console.log(datalist[1].color[i])
    }

</script>
</html>